<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>搜索</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/main.css">
    <script src="/js/jquery-2.1.4.min.js"></script>
    <style>
        .s-ipt {
            display: inline-block;
            position: relative;
            height: 32px;
            width: 450px;
            font: 16px/18px arial;
            line-height: 22px;
            margin: 6px 0 0 7px;
            padding: 0;
            background: transparent;
            border: 0;
            outline: 0;
            -webkit-appearance: none;
            box-sizing: border-box;
            border: 1px solid #f1f1f1;
        }

        .s-ipt:focus {
            border: 1px solid #2d78f4;
        }

        .s-btn {
            background: #3385ff;
            padding: 6px 16px;
            color: white;
            border-bottom: 1px solid #2d78f4;
            font-size: 16px;
            border-radius: 2px;
            text-align: center;
            word-spacing: normal;
            text-transform: none;
            text-indent: 0px;
            text-shadow: none;
            width: auto;
            height: auto;
            border-bottom: 1px solid transparent;
            cursor: pointer;
            position: relative;
            top: -2px;
            left: -5px;
        }

        .s-type {
            height: 40px;
            font-size: 14px;
            margin: 10px 50px 10px 0;
            background: -webkit-linear-gradient(top, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.1));
        }

        .s-type > ul {
            display: -webkit-box;
        }

        .s-type > ul > li {
            height: 100%;
            width: 100px;
            color: #666;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }

        .s-type > ul > li.active {
            font-weight: 700;
            border-bottom: 2px solid #2d78f4;
        }
        .searched{
            color:#c00;
        }
    </style>
</head>
<body class="lay-blog">
<div th:include="/teacher/templates::header"></div>
<div class="container-wrap" style="background-color: white;">
    <div class="container" id="search" style="width:1000px;">
        <div class="search-form" style="padding: 20px;">
            <div class="s-input">
                <input type="text" class="s-ipt" v-model="text" @keyup.enter="init()">
                <span class="s-btn" style="" @click="init()">
                    搜 索
                </span>
            </div>
            <div class="s-type">
                <ul>
                    <li class="active">文章</li>
                    <li><a :href="'/teacher/searchVideo.html?key='+text">视频</a></li>
                    <li><a :href="'/teacher/searchUser.html?key='+text">用户</a></li>
                </ul>
            </div>
        </div>
        <div class="search-result">
            <div class="item" v-for="article in articles">
                <div class="item-box  layer-photos-demo1 layer-photos-demo">
                    <h3><a :href="'/teacher/article/details.html?id='+article.id" v-html="article.title"></a></h3>
                    <h5>发布于：<span>{{article.releaseTime}}</span></h5>
                    <div>{{article.summary}}</div>
                </div>
            </div>
        </div>
        <div id="article_items"></div>
    </div>
</div>

<div th:include="/teacher/templates::footer"></div>
<script src="/layui/layui.js"></script>
<script src="/vue/vue.js"></script>
<script>

    // 参数
    var key = '';
    if(document.location.href.indexOf("?")!=-1){
        var param = document.location.href.split('?')[1];
        key = param.split('=')[1];
    }
    // page=1
    Search = new Vue({
        el: '#search',
        data: {
            text: key,
            articles: [],
            totalCount: 0,  //请求后的值
            pageNumber: 0,  // 使用ajax异步刷新，页面初始值为1
            pageSize: 2,
            laypage:{}
        },
        methods: {
            init(){
                this.pageNumber = 0;
                this.pageSize = 5;
                if(this.text==''){
                    return;
                }
                $.ajax({
                    url: '/api/search/article',
                    type: 'get',
                    data: {
                        page: this.pageNumber,
                        size: this.pageSize,
                        key:this.text
                    },
                    success: (res) => {
                        this.articles = res.data.content;
                        for(var i=0;i<this.articles.length; i++){
                            var title = this.articles[i].title.replace(res.msg, `<span class="searched">${res.msg}</span>`)
                            this.articles[i].title = title
                        }
                        this.totalCount = res.data.totalElements;
                        this.laypage.render({
                            elem: 'article_items', //注意，这里的 test1 是 ID，不用加 # 号
                            count: this.totalCount, //数据总数，从服务端得到
                            limit: this.pageSize,
                            theme: '#1e9fff',
                            jump:function (obj, first) {
                                if(!first){
                                    // obj需要跳转的页面参数
                                    Search.jump(obj.curr);
                                }
                            }
                        });
                    }
                })
            },
            jump:function (page) {
                $.ajax({
                    url: '/api/search/article',
                    type: 'get',
                    data: {
                        page: page - 1,  //
                        size: this.pageSize
                    },
                    success: (res) => {
                        this.articles = res.data.content;
                        this.totalCount = res.data.totalElements;
                    }
                })
            }
        }
    });

    layui.use('laypage', function () {
        var laypage = layui.laypage;
        Search.laypage = laypage
        Search.init()
    });


</script>
</body>
</html>